<template>
  <el-dialog
    v-model="localVisible"
    :title="dialogTitle"
    width="420px"
    destroy-on-close
    @close="emitClose"
  >
    <div v-if="info">
      <p><strong>名称：</strong>{{ info.name }}</p>
      <p><strong>经度：</strong>{{ info.lng }}</p>
      <p><strong>纬度：</strong>{{ info.lat }}</p>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="localVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from "vue";

export default defineComponent({
  name: "MarkerInfoDialog",
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    info: {
      type: Object as () => { name: string; lng: number; lat: number } | null,
      required: false,
      default: null,
    },
  },
  emits: ["update:visible"],
  setup(props, { emit }) {
    const localVisible = ref<boolean>(props.visible);

    watch(
      () => props.visible,
      (v) => (localVisible.value = v)
    );

    watch(localVisible, (v) => emit("update:visible", v));

    const dialogTitle = computed(() =>
      props.info?.name ? `标注信息 - ${props.info.name}` : "标注信息"
    );

    const info = computed(() => props.info);

    /**
     * emitClose
     * 功能：统一触发关闭时的 v-model 回写
     */
    const emitClose = () => {
      emit("update:visible", false);
    };

    return { localVisible, dialogTitle, info, emitClose };
  },
});
</script>

<style scoped></style>
